<!--
Template Name: user
Create author: qinglong
Create Date  : 2021-04-28
-->
<template>
  <div class="page">
    <mixForm v-model="searchData" :fields="searchFields" :inline="true" />
    <mixTable :data="tableData" :fields="tableFields" @selection-change="selection" />
    <mixPage v-model="page" />
    <el-dialog title="新增用户" :visible.sync="addShow" width="680px">
      <mixForm v-model="formData" :fields="userFields" label-width="100px" :inline="true" />
      <div slot="footer">
        <el-button @click="()=>this.addShow=false">取消</el-button>
        <el-button @click="onAdd" type="primary">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑用户" :visible.sync="editShow" width="500px">
      <mixForm v-model="formData" :fields="userFields" />
      <div slot="footer">
        <el-button @click="()=>this.editShow=false">取消</el-button>
        <el-button @click="onEdit" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { user_add, user_del, user_edit, user_group, user_list } from "@/api";
import md5 from "md5";
export default {
  name: "user",
  data() {
    return {
      addShow: false,
      editShow: false,
      formData: {},
      userFields: [
        { prop: "username", label: "账号" },
        { prop: "password", label: "密码" },
        { prop: "name", label: "姓名" },
        { prop: "nickname", label: "昵称" },
        { prop: "phone", label: "手机号" },
        { prop: "orgName", label: "部门岗位" },
        {
          prop: "sex",
          label: "性别",
          k: "select",
          option: [
            { label: "男", value: "男" },
            { label: "女", value: "女" }
          ]
        },
        {
          prop: "type",
          label: "用户类型",
          k: "select",
          option: [
            { label: "员工", type: 1 },
            { label: "用户", type: 2 },
            { label: "其它", type: 3 }
          ]
        },

        {
          prop: "roles",
          label: "权限组",
          k: "select",
          multiple: true,
          config: { label: "name", value: "id" },
          options: this.getRoles
        }
      ],
      searchData: {},
      searchFields: [
        { k: "", prop: "username", label: "用户名" },
        { k: "", prop: "name", label: "姓名" },
        { k: "", prop: "phone", label: "手机号" },
        {
          k: "select",
          prop: "sex",
          label: "性别",
          option: [
            { label: "男", value: "男" },
            { label: "女", value: "女" }
          ]
        },
        {
          k: "button",
          option: [
            { type: "primary", label: "搜索", click: this.search },
            { type: "info", label: "重置", click: this.reset }
          ]
        },
        {
          k: "button",
          wrap: true,
          option: [
            { label: "批量删除", click: this.dels, type: "danger" },
            { label: "新增用户", click: this.add, type: "primary" }
          ]
        }
      ],
      select: [],
      tableData: [],
      tableFields: [
        { type: "selection" },
        { prop: "id", label: "id" },
        { prop: "username", label: "用户名" },
        { prop: "name", label: "姓名" },
        { prop: "rolesName", label: "权限组", k: "array" },
        { prop: "superAdmin", label: "是否超级管理", k: "boolean" },
        { prop: "sex", label: "性别" },
        { prop: "age", label: "年龄" },
        { prop: "phone", label: "手机号" },
        { prop: "email", label: "邮箱" },
        {
          k: "button",
          label: "操作",
          fixed: "right",
          option: [
            { label: "修改", click: this.edit, type: "success" },
            { label: "删除", click: this.del, type: "danger" }
          ]
        }
      ],
      page: { page: 1, size: 20, total: 0, event: this.getData }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 重置
    reset() {
      this.searchData = {};
      this.getData();
    },
    // 搜索
    async search() {
      this.page.page = 1;
      this.getData();
    },
    // 获取权限列表
    async getRoles() {
      let { data } = await user_group();
      return data?.data?.data || [];
    },
    // 获取用户列表
    async getData() {
      let { page, size } = this.page;
      let params = Object.assign({ page, size }, this.searchData);
      let res = await user_list(params);
      let { data, ...items } = res.data.data;
      this.page = Object.assign({}, this.page, items);
      this.tableData = data;
    },
    // 勾选数据
    selection(arr) {
      this.select = arr;
    },
    // 批量删除
    async dels() {
      try {
        await this.$confirm("确定删除所选用户吗？", "提示", { type: "warning" });
        let id = this.select.map((e) => e.id);
        await user_del({ id });
        this.getData();
      } catch (error) {
        console.log(error);
      }
    },
    // 删除用户
    del({ row }) {
      console.log(row);
      this.select = [row];
      this.dels();
    },
    // 新增用户
    add() {
      this.formData = {};
      this.addShow = true;
    },
    async onAdd() {
      try {
        let params = { ...this.formData };
        params.password = md5(params.password || 123456);
        await user_add(params);
        this.getData();
        this.addShow = false;
      } catch (error) {
        console.log(error);
      }
    },
    // 修改用户
    edit({ row }) {
      this.formData = { ...row };
      this.editShow = true;
      console.log("00");
    },
    async onEdit() {
      try {
        let params = { ...this.formData };
        await user_edit(params);
        this.getData();
        this.editShow = false;
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>
<style lang='scss' scoped>
</style>